<template>
	<div>
		<layout-base :loading="loading">
			<crumb title="上传教学视频" :routes="crumb"></crumb>
			<pannel>
				<h3 class="mb-10">上传教学视频</h3>
				<p class="gray mb-30">教学视频最大不得超过<b class="primary">100M</b>; 素材最大不超过<b class="primary">10M</b>。</p>
				<div class="input-wraper">
					<label><span class="danger">*</span> 所属课程</label>
					<div class="flex">
						<select v-model="classInfo.courseId">
							<option v-for="(v, i) in courseSelect" :key="i" :value="v._id">{{v.name}}</option>
						</select>
						<span class="btn gradient-primary form-select-btn" @click="showAddModal = true">创建课程</span>
					</div>
				</div>
				<div class="input-wraper">
					<label><span class="danger">*</span> 所属章</label>
					<div class="flex">
						<select v-model="classInfo.chapterId">
							<option v-for="(v, i) in chapters" :key="i" :value="v._id">{{v.name}}</option>
						</select>
						<span class="btn gradient-primary form-select-btn" @click="showAddChapter = true">章管理</span>
					</div>
				</div>
				<div class="input-wraper">
					<label><span class="danger">*</span> 课堂标题</label>
					<input placeholder="名称规范示例: 第一节 Photoshop文件操作" />
				</div>
				<div class="input-wraper">
					<label>课程副标题(简述)</label>
					<input placeholder="副标题或简述" v-model="classInfo.summary" />
				</div>
				<div class="input-wraper">
					<label><span class="danger">*</span> 上传课堂视频</label>
					<div class="flex">
						<div class="file-input-wraper">
							<span>点击此处上传视频</span>
							<input type="file" />
						</div>
						<span class="btn gradient-primary form-select-btn" :data-disbaled="true">预览视频</span>
					</div>
				</div>
				<div class="input-wraper">
					<label>上传课堂素材</label>
					<div class="file-input-wraper">
						<span>点击此处上传素材</span>
						<input type="file" />
					</div>
				</div>
				<div class="mt-30">
					<span class="btn gradient-primary pointer">确认提交</span>
					<span class="btn ml-20 pointer" @click="$router.go(-1)">取消</span>
				</div>
			</pannel>
		</layout-base>
		<addcourse-modal v-model="showAddModal" @confirm="onAddCourse"></addcourse-modal>
		<addchapter-modal
			v-model="showAddChapter"
			title="章"
			:items="chapters"
			@delete="onChapterDelete"
			@add="onChapterAdd"
			@change="onChapterChange"
		>
		</addchapter-modal>
	</div>
</template>

<script>
	import addCourseModal from './add-course-modal'
	import addChapterModal from '@/components/modal/classify-modal'
	export default{
		components: {
			'addcourse-modal': addCourseModal,
			'addchapter-modal': addChapterModal
		},
		data(){
			return{
				crumb:[
					{label:'我的课程'},
					{label:'课堂视频', url:'/course/video/list'}
				],
				loading: false,
				classInfo: {
					courseId: 2,
					chapterId: 1,
					summary: ''
				},
				//创建课程
				showAddModal: false,
				courseSelect:[
					{_id:2, name:'Photoshop', createTime:'2019-06-30', learn:23, status:'completed'},
					{_id:3, name:'Illustrator', createTime:'2019-06-30', learn:23, status:'updating'}
				],
				//章
				showAddChapter: false,
				chapters:[
					{_id:1, name:'第一章 基础操作'},
					{_id:2, name:'第二章 进阶操作'},
					{_id:3, name:'第三章 高级操作'}
				]
			}
		},
		methods:{
			onAddCourse(data){
				this.courseSelect.unshift(Object.assign({createTime:'刚刚', learn:0, _id:4}, data))
				this.classInfo.courseId = 4
				this.showAddModal = false
			},
			onChapterDelete(i){
				var _course = this
				this.$Confirm({
					title: `确认删除 [${this.chapters[i].name}] 吗`,
					content: '删除后该章节的视频会保留，仅删除该分类！',
					onConfirm(){
						_course.chapters.splice(i, 1)
					}
				})
			},
			onChapterAdd(name){
				this.chapters.push({_id:4, name})
			},
			onChapterChange({e, i}){
				this.chapters[i].name = e.target.value
			}
		}
	}
</script>

<style lang="scss">
.form-select-btn{
	flex: 0 0 100px;
	margin-left: 20px;
}
</style>
